<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
  <title>html5向左滑动删除特效</title>
  <style>
  * {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  header {
    background: #f7483b;
    border-bottom: 1px solid #ccc
  }
  
  header h2 {
    text-align: center;
    line-height: 54px;
    font-size: 16px;
    color: #fff
  }
  
  .list-ul {
    overflow: hidden
  }
  
  .list-li {
    line-height: 60px;
    border-bottom: 1px solid #fcfcfc;
    position: relative;
    padding: 0 12px;
    color: #666;
    background: #f2f2f2;
    -webkit-transform: translateX(0px);
  }
  
  .btn {
    position: absolute;
    top: 0;
    right: -80px;
    text-align: center;
    background: #ffcb20;
    color: #fff;
    width: 80px
  }
  </style>
  <script>
  /*
   * 描述：html5苹果手机向左滑动删除特效
   */
  window.addEventListener('load', function() {
    var initX; //触摸位置
    var moveX; //滑动时的位置
    var X = 0; //移动距离
    var objX = 0; //目标对象位置
    window.addEventListener('touchstart', function(event) {
      event.preventDefault();
      var obj = event.target.parentNode;
      if (obj.className == "list-li") {
        initX = event.targetTouches[0].pageX;
        objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
      }
      if (objX == 0) {
        window.addEventListener('touchmove', function(event) {
          event.preventDefault();
          var obj = event.target.parentNode;
          if (obj.className == "list-li") {
            moveX = event.targetTouches[0].pageX;
            X = moveX - initX;
            if (X >= 0) {
              obj.style.WebkitTransform = "translateX(" + 0 + "px)";
            } else if (X < 0) {
              var l = Math.abs(X);
              obj.style.WebkitTransform = "translateX(" + -l + "px)";
              if (l > 80) {
                l = 80;
                obj.style.WebkitTransform = "translateX(" + -l + "px)";
              }
            }
          }
        });
      } else if (objX < 0) {
        window.addEventListener('touchmove', function(event) {
          event.preventDefault();
          var obj = event.target.parentNode;
          if (obj.className == "list-li") {
            moveX = event.targetTouches[0].pageX;
            X = moveX - initX;
            if (X >= 0) {
              var r = -80 + Math.abs(X);
              obj.style.WebkitTransform = "translateX(" + r + "px)";
              if (r > 0) {
                r = 0;
                obj.style.WebkitTransform = "translateX(" + r + "px)";
              }
            } else { //向左滑动
              obj.style.WebkitTransform = "translateX(" + -80 + "px)";
            }
          }
        });
      }

    })
    window.addEventListener('touchend', function(event) {
      event.preventDefault();
      var obj = event.target.parentNode;
      if (obj.className == "list-li") {
        objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
        if (objX > -40) {
          obj.style.WebkitTransform = "translateX(" + 0 + "px)";
          objX = 0;
        } else {
          obj.style.WebkitTransform = "translateX(" + -80 + "px)";
          objX = -80;
        }
      }
    })
  })
  </script>
</head>

<body>
  <header>
    <h2>消息列表</h2>
  </header>
  <section class="list">
    <ul class="list-ul">
      <li id="li" class="list-li">
        <div class="con">
          你的快递到了，请到楼下签收
        </div>
        <div class="btn">删除</div>
      </li>
      <li class="list-li">
        <div class="con">
          哇，你在干嘛，快点来啊就等你了
        </div>
        <div class="btn">删除</div>
      </li>
    </ul>
  </section>
  <table style="width: 100%;">
  	<tr class="list-li" style="border: none;">
  		 <td>
	  		sssssssssssssssss
	  	</td>
	  	<td>
	  		sssssssssssssssss
	  	</td>
  	</tr>
  	<tr>
  		<td>
	  		sssssssssssssssss
	  	</td>
	  	<td>
	  		sssssssssssssssss
	  	</td>
  	</tr>
  	<tr>
  		<td>
	  		sssssssssssssssss
	  	</td>
	  	<td>
	  		sssssssssssssssss
	  	</td>
  	</tr>
  	<tr>
  		<td>
	  		sssssssssssssssss
	  	</td>
	  	<td>
	  		sssssssssssssssss
	  	</td>
  	</tr>
  	<tr>
  		<td>
	  		sssssssssssssssss
	  	</td>
	  	<td>
	  		sssssssssssssssss
	  	</td>
  	</tr>
  </table>
</body>

</html>